import Head from 'next/head'
import Image from 'next/image'
import moment from 'moment';
import 'moment/locale/zh-cn'

import Layout from '../components/layout'
import HeadBar from '../components/headbar'
import Notification from '../components/notification'
import BottomBar from '../components/bottombar'

import styles from './home.module.scss'
import HomeChart from './homechart';
import Card from '../components/card'
import More from '../components/more';

export default function FirstPost() {
    return (
        <>
            <Head>
                <title>电子班牌</title>
            </Head>
            <HeadBar />
            <Layout>
                <Notification>
                    阅览图书活动【The King's Car】时间调整
                </Notification>
                <Card className={styles.card1}>
                    <h1 className={styles.line1}>化学实验室
                        <span className={styles.status}>
                            <Image src={'/images/door.png'} alt='door' width={24} height={24}></Image>空闲
                        </span>
                    </h1>
                    <h3 className={styles.line2}>
                        <Image src={'/images/local.png'} alt='local' width={18} height={18}></Image>逸夫楼503
                        <Image src={'/images/building.png'} alt='building' width={18} height={18} style={{ marginLeft: '42px' }}></Image>综合空间
                        <Image src={'/images/personcount.png'} alt='personcount' width={18} height={18} style={{ marginLeft: '42px' }}></Image>50座
                    </h3>
                    <h3 className={styles.line2}>
                        <Image src={'/images/teacher.png'} alt='teacher' width={18} height={18}></Image>负责教师：孙梦萍

                    </h3>
                    <h3 className={styles.line2}>
                        <Image src={'/images/phone.png'} alt='phone' width={18} height={18}></Image>联系方式：18866668888
                    </h3>
                    <h2 className={styles.line3}>
                        开始预约
                        <Image src={'/images/arrowblk.png'} alt='arrow' width={18} height={18}></Image>
                    </h2>
                </Card>
                <Card className={styles.card2} title={"预约统计"}>
                    {<HomeChart />}
                </Card>
                <Card className={styles.card3} title={"校园新闻"} header={<More />}>
                    {<Posts />}
                </Card>
                <Card className={styles.card3} title={"通知公告"} header={<More />}>
                    {<Posts />}
                </Card>
            </Layout>
            <BottomBar />
        </>
    )
}


function Posts() {
    return (
        <>
            <div className={styles.post}>
                <div className={styles.date}>
                    <span className={styles.line1}>{moment().format("M/D")}</span>
                    <span className={styles.divider} />
                    <span className={styles.line2}>{moment().format("YYYY")}年</span>
                </div>
                <div className={styles.content}>
                    2024年暑假放假通知和工作2024年暑假放假通知和工作2024年暑假放假通知和工作
                </div>
            </div>
            <div className={styles.post}>
                <div className={styles.date}>
                    <span className={styles.line1}>{moment().format("M/D")}</span>
                    <span className={styles.divider} />
                    <span className={styles.line2}>{moment().format("YYYY")}年</span>
                </div>
                <div className={styles.content}>
                    江西应用科技学院：持续进江西应用科技学院：持续进
                </div>
            </div>
        </>
    )
}